<template>
  <el-dialog title="网关配置" :model-value="visible" width="800px" append-to-body @close="handleClose">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基础配置" name="basic">
        <el-form :model="configForm" label-width="120px">
          <el-form-item label="心跳间隔(秒)">
            <el-input-number v-model="configForm.heartbeatInterval" :min="10" :max="300" />
          </el-form-item>
          <el-form-item label="数据上报间隔(秒)">
            <el-input-number v-model="configForm.reportInterval" :min="5" :max="3600" />
          </el-form-item>
          <el-form-item label="连接超时(秒)">
            <el-input-number v-model="configForm.connectionTimeout" :min="5" :max="60" />
          </el-form-item>
          <el-form-item label="重连次数">
            <el-input-number v-model="configForm.retryCount" :min="1" :max="10" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="协议配置" name="protocol">
        <el-form :model="configForm" label-width="120px">
          <el-form-item label="通信协议">
            <el-select v-model="configForm.protocol" style="width: 100%">
              <el-option label="MQTT" value="mqtt" />
              <el-option label="HTTP" value="http" />
              <el-option label="CoAP" value="coap" />
              <el-option label="Modbus" value="modbus" />
            </el-select>
          </el-form-item>
          <el-form-item label="数据格式">
            <el-select v-model="configForm.dataFormat" style="width: 100%">
              <el-option label="JSON" value="json" />
              <el-option label="XML" value="xml" />
              <el-option label="Binary" value="binary" />
            </el-select>
          </el-form-item>
          <el-form-item label="加密方式">
            <el-select v-model="configForm.encryption" style="width: 100%">
              <el-option label="无加密" value="none" />
              <el-option label="TLS" value="tls" />
              <el-option label="AES" value="aes" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="日志配置" name="log">
        <el-form :model="configForm" label-width="120px">
          <el-form-item label="日志级别">
            <el-select v-model="configForm.logLevel" style="width: 100%">
              <el-option label="DEBUG" value="debug" />
              <el-option label="INFO" value="info" />
              <el-option label="WARN" value="warn" />
              <el-option label="ERROR" value="error" />
            </el-select>
          </el-form-item>
          <el-form-item label="日志保留天数">
            <el-input-number v-model="configForm.logRetentionDays" :min="1" :max="365" />
          </el-form-item>
          <el-form-item label="日志文件大小(MB)">
            <el-input-number v-model="configForm.logFileSize" :min="1" :max="1024" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSaveConfig">保存配置</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

// Props
interface Props {
  visible: boolean
  configData?: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  configData: () => ({})
})

// Emits
const emit = defineEmits(['update:visible', 'save', 'cancel'])

// 当前激活的标签页
const activeTab = ref('basic')

// 配置表单
const configForm = reactive({
  heartbeatInterval: 60,
  reportInterval: 300,
  connectionTimeout: 30,
  retryCount: 3,
  protocol: 'mqtt',
  dataFormat: 'json',
  encryption: 'tls',
  logLevel: 'info',
  logRetentionDays: 30,
  logFileSize: 100
})

// 监听配置数据变化
watch(() => props.configData, (newData) => {
  if (newData) {
    Object.assign(configForm, newData)
  }
}, { deep: true, immediate: true })

// 保存配置
const handleSaveConfig = () => {
  emit('save', { ...configForm })
  ElMessage.success('配置保存成功')
  emit('update:visible', false)
}

// 取消
const handleCancel = () => {
  emit('cancel')
  emit('update:visible', false)
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>